<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东顶部导航条</title>
    <!-- 重置样式 -->
    <link rel="stylesheet" href="../03_layout/CSS/reset.css">
    <!-- 引入图标字体 -->
    <link rel="stylesheet" href="../06_font&background/fa/css/all.css">
    <style>
        /* 
        设置body的字体大小和样式
        
         */
        body{
            font-size: 15px;
            font-family: Microsoft YaHei,'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }
        /* 设置大容器的样式 */
        div.bigbox{
            width: 100%;
            height: 38px;
            background-color: #E3E4E5;

            border-bottom: 1px solid #DDDDDD;

            
        }
        /* 设置小容器 */
        div.topbox{
            width: 1476px;
            height: 38px;
            background-color: #E3E4E5;
            /* 小容器内容居中 */
            line-height: 38px;
            /* 开启定位，为子元素定位 */
            position: relative;
            /* 小容器居中 */
            margin: 0px auto;
        }
        /* 设置左边的地域 */
        div.left-menu{

           float: left;
           
        }
        .current-city{
            width: 70px;
            height: 35px;

            position: absolute;
         
         /* 
            让它跟hover一样，让他不动
          */
            border: 2px solid #E3E4E5;
           border-bottom: 2px #E3E4E5 solid
            
        }
        .city-list{
            /* 隐藏 */
            display: none;

            width: 398px;
            height: 566px;
            background-color: white;
            border: 2px solid #CCC;
            /* 设置绝对定位，使其不占据页面的位置 */
            position: absolute;
            top: 38px;
            /* 设置阴影 */
            box-shadow: 0 2px 2px rgba(0,0,0,.3);
        }
        /* 设置右边的菜单 */
        ul.right-menu{
            
            position: absolute;
            /* 让右边菜单靠右 */
            right: 20px;
            color: #999;
        }
        .current-city .fas{
            /* 将位置图标改为红色 */
            
            color: #f10215;
            font-size: 16px;
            position: relative;
            top: 1px;
            left: -2px;
        }
        ul li{
            
            display: block;
            /* 宽度由字体内容撑开 */
            height: 38px;
            /* 让他们从左排列 */
            float: left;
        }
        li.line{
            /* 设置间隔的间距 */
            margin: 0px 15px 0px 6px;
        }
        a{
            /* 调正字体链接颜色 */
            color: #999;

            text-decoration: none;
        }
        a.red{
            /* 部分字体为红色 */
            color: #ED4150;
        }
        .topbox a.hr:hover{
            /* 部分点了会变红 */
            color: #ED4150;
        }
       
       .left-menu:hover .city-list{
           display: block;
           border-top: 1px #ccc solid;

           z-index: 1;
       } 
       .left-menu:hover .current-city{
            background-color: white;
            border: 2px solid #CCC;
           border-bottom: 2px white solid;

           z-index: 10;
       }
       .current-city:hover{
           background-color: white;
           border: 2px solid #CCC;
           border-bottom: 2px white solid;

           z-index: 10;
       }
       /* 我的京东 这一个容器 */
       .j1{
           width: 80px;
           height: 35px;

           position: relative;
       }
       /* 我的京东上面的小方块 */
       .x1{
           width: 80px;
            height: 38px;
            border: 2px solid #E3E4E5;
            border-bottom: 2px white solid;
            z-index: 10;
             
            position: absolute;
            top: -2px;

            

            
       }
       /* 框框样式 */
       .k1{
            display: none;

           width: 348px;
           height: 197px;
           background-color: white;
           border: 1px #ccc solid;

           position: absolute;
           left: 0px;
           top: 38px;
           

           box-shadow: 0 2px 2px rgba(0,0,0,.3);
           
       }
       /* 
        打开框框
        */
       .j1:hover .k1{
         display: block;
           border-top: 1px #ccc solid;

           z-index: 1;

       }
       /* 鼠标移过小方块开始变 */
       .x1:hover{
             width: 80px;
             height: 38px;
             background-color: white;
            border: 2px solid #ccc;
            border-bottom: 2px white solid;
            
            z-index: 10;
       }
       /* 鼠标在框中时上面小方块不变 */
        .j1:hover  .x1{
            width: 80px;
             height: 38px;
             background-color: white;
            border: 2px solid #ccc;
            border-bottom: 2px white solid;

            z-index: 10;
        }




    </style>
    
</head>
<body>
    <!-- 设置最大导航条 -->
    <div class="bigbox">
        <!-- 创建内部容器 -->
        <div class="topbox">
            <!-- 创建左边的条 -->
            <div class="left-menu">
                <div class="current-city">
                    &nbsp;
                    <i class="fas fa-map-marker-alt"></i>
                    <a class="hr" href="javascript:;">广东</a>
                </div>

                <!-- 防止城市列表 -->
                <div class="city-list">

                </div>
            </div>
            <!-- 创建右侧菜单 -->
            <ul class="right-menu">
                <li>
                    <a class="hr" href="javascript:;">你好，请登陆</a>
                    &nbsp;
                    <a class="red" href="javascript:;">免费注册</a>
                </li>

                <!-- 分割线 -->
                <li class="line">|</li>
                <li><a class="hr" href="javascript:;">我的订单</a></li>
                
                <li class="line">|</li>
                <li class="j1">
                    <div class="x1">
                        <a class="hr" href="javascript:;">我的京东</a>
                        <i class="fas fa-angle-down"></i>
                    </div>
                    
                    <div class="k1"></div>
                   
                </li>

                <li class="line">|</li>
                <li><a class="hr" href="javascript:;">京东会员</a></li>

                <li class="line">|</li>
                <li>
                    <a class="red" href="javascript:;">企业采购</a>
                    <i class="fas fa-angle-down"></i>
                </li>
          

                <li class="line">|</li>
                <li>
                    <a href="javascript:;">客户服务</a>
                    <i class="fas fa-angle-down"></i>
                </li>
            

                <li class="line">|</li>
                <li>
                    <a href="javascript:;">网站导航</a>
                    <i class="fas fa-angle-down"></i>
                </li>
               

                <li class="line">|</li>
                <li><a href="javascript:;">手机京东</a></li>

            </ul>

        </div>
    </div>
</body>
</html>